<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华为应用市场看板</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="/js/markdown-it.min.js"></script>
    <script src="/js/chart.js"></script>
    <script src="/js/chartjs-plugin-datalabels.js"></script>
    <script src="/js/chartjs-adapter-date-fns.js"></script>
    <!-- 模块化 JavaScript 文件 -->
    <script src="/js/modules/utils.js"></script>
    <script src="/js/modules/data-loaders.js"></script>
    <script src="/js/modules/renderers.js"></script>
    <script src="/js/modules/charts.js"></script>
    <script src="/js/modules/app-details.js"></script>
    <script src="/js/modules/sse-manager.js"></script>
    <script src="/js/dashboard.js"></script>
    <style>
        body {
            background: #EEF6FE;
        }

        .btn-animation {
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .btn-animation:active {
            transform: scale(0.95);
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        }

        .chart-container {
            height: 300px;
            position: relative;
            transition: all 0.3s ease;
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: 8px;
            padding: 8px;
        }

        .table th {
            cursor: pointer;
            transition: all 0.2s ease;
            background: linear-gradient(to right, #f8f9fa, #e9f2ff);
            color: #3a6ea5;
        }

        .table th:hover {
            background: linear-gradient(to right, #e2f0fd, #d1e5ff);
            transform: translateY(-2px);
        }

        .loading {
            text-align: center;
            padding: 50px;
        }

        .star-rating {
            color: #ffcc00;
            text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
        }

        .app-icon {
            width: 32px;
            height: 32px;
        }
    </style>
</head>

<body class="bg-gradient-to-br">
    <div class="px-3 py-6">
        <!-- Header -->
        <div class="mb-2">
            <div
                class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl shadow-md border border-blue-100 transition-all duration-300 hover:shadow-lg">
                <div class="px-3 py-4">
                    <h1 class="text-2xl font-semibold text-indigo-900 mb-3 animate-pulse">
                        华为应用市场看板 数据收集自 appgallery api 不保证来源的准确性、完整性和真实性 仅供参考
                    </h1>
                    <div class="flex flex-col sm:flex-row justify-start sm:justify-between items-center gap-4">
                        <div class="flex flex-wrap justify-start items-center gap-1 sm:gap-3 w-full sm:w-auto">
                            <button id="refreshBtn"
                                class="inline-flex items-center px-3 py-2 bg-gradient-to-r from-cyan-500 to-blue-600 text-white text-sm font-medium rounded-xl hover:from-cyan-600 hover:to-blue-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 transition-all duration-300 transform hover:scale-105 hover:shadow-md">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">
                                    </path>
                                </svg>
                                刷新数据
                            </button>
                            <button id="helpBtn"
                                class="inline-flex items-center px-3 py-2 bg-gradient-to-r from-emerald-500 to-green-600 text-white text-sm font-medium rounded-xl hover:from-emerald-600 hover:to-green-700 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 transition-all duration-300 transform hover:scale-105 hover:shadow-md">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
                                    </path>
                                </svg>
                                帮助信息
                            </button>
                            <a id="apiDocsLink" href="/docs" target="_blank"
                                class="inline-flex items-center px-3 py-2 bg-gradient-to-r from-blue-500 to-indigo-600 text-white text-sm font-medium rounded-xl hover:from-blue-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-300 transform hover:scale-105 hover:shadow-md">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M9 12h6m-3-3v6m-6 3h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v10a2 2 0 002 2zm10-10V4a1 1 0 00-1-1H8a1 1 0 00-1 1v2h10z">
                                    </path>
                                </svg>
                                API 文档
                            </a>
                            <button id="changelogBtn"
                                class="inline-flex items-center px-3 py-2 bg-gradient-to-r from-red-500 to-rose-600 text-white text-sm font-medium rounded-xl hover:from-red-600 hover:to-rose-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-all duration-300 transform hover:scale-105 hover:shadow-md">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
                                    </path>
                                </svg>
                                查看更新日志
                            </button>
                            <button id="contactBtn"
                                class="inline-flex items-center px-3 py-2 bg-gradient-to-r from-purple-500 to-indigo-600 text-white text-sm font-medium rounded-xl hover:from-purple-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-all duration-300 transform hover:scale-105 hover:shadow-md">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
                                    </path>
                                </svg>
                                问题反馈&交流
                            </button>
                            <button id="submitBtn"
                                class="inline-flex items-center px-3 py-2 bg-gradient-to-r from-orange-500 to-yellow-600 text-white text-sm font-medium rounded-xl hover:from-orange-600 hover:to-yellow-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 transition-all duration-300 transform hover:scale-105 hover:shadow-md">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                                </svg>
                                投稿
                            </button>
                            <button id="openTVersionBtn" onclick="window.open('https://hmos.txit.top/dashboard', '_blank')"
                                class="inline-flex items-center px-3 py-2 bg-gradient-to-r from-green-500 to-teal-600 text-white text-sm font-medium rounded-xl hover:from-green-600 hover:to-teal-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all duration-300 transform hover:scale-105 hover:shadow-md">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                                </svg>
                                打开 T 版本
                            </button>
                            <button id="sponsorBtn" onclick="window.open('https://afdian.com/a/shenjack', '_blank')"
                                class="inline-flex items-center px-3 py-2 bg-gradient-to-r from-pink-500 to-rose-600 text-white text-sm font-medium rounded-xl hover:from-pink-600 hover:to-rose-700 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 transition-all duration-300 transform hover:scale-105 hover:shadow-md">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                                </svg>
                                赞助作者
                            </button>
                        </div>
                        <div class="flex items-center space-x-4">
                            <span class="text-gray-500 text-sm">最后更新: <span id="lastUpdate">-</span></span>
                            <span id="syncStatusContainer" class="hidden text-sm">
                                <span class="text-gray-500">同步状态:</span>
                                <span id="syncStatus" class="font-medium"></span>
                                <span id="syncProgress" class="text-gray-600 ml-2"></span>
                                <span id="syncStats" class="text-gray-600 ml-2"></span>
                                <span id="syncTime" class="text-gray-600 ml-2"></span>
                            </span>
                            <span id="nextSyncContainer" class="hidden text-sm">
                                <span class="text-gray-500">下次同步:</span>
                                <span id="nextSyncCountdown" class="font-medium text-orange-600 ml-1"></span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Stats Cards -->
        <div class="grid grid-cols-1 md:grid-cols-5 gap-2 mb-2">
            <div
                class="bg-gradient-to-br from-rose-50 to-pink-50 rounded-xl shadow-md border border-rose-100 p-6 text-center transition-all duration-300 hover:shadow-lg hover:translate-y-[-5px]">
                <div class="py-2">
                    <h5 class="text-rose-600 text-sm font-medium">已爬取总数</h5>
                    <h3 id="totalCount"
                        class="text-2xl font-bold text-rose-800 transition-all duration-500 hover:text-rose-600">
                        <span id="loadingTotalCount"
                            class="inline-block w-6 h-6 border-2 border-rose-500 border-t-transparent rounded-xl"></span>
                    </h3>
                </div>
            </div>
            <div
                class="bg-gradient-to-br from-orange-50 to-amber-50 rounded-xl shadow-md border border-orange-100 p-6 text-center transition-all duration-300 hover:shadow-lg hover:translate-y-[-5px]">
                <div class="py-2">
                    <h5 class="text-amber-600 text-sm font-medium">应用总数</h5>
                    <h3 id="appCount"
                        class="text-2xl font-bold text-amber-800 transition-all duration-500 hover:text-amber-600">
                        <span id="loadingOverview"
                            class="inline-block w-6 h-6 border-2 border-amber-500 border-t-transparent rounded-xl"></span>
                    </h3>
                </div>
            </div>
            <div
                class="bg-gradient-to-br from-emerald-50 to-teal-50 rounded-xl shadow-md border border-emerald-100 p-6 text-center transition-all duration-300 hover:shadow-lg hover:translate-y-[-5px]">
                <div class="py-2">
                    <h5 class="text-emerald-600 text-sm font-medium">元服务总数</h5>
                    <h3 id="atomicServiceCount"
                        class="text-2xl font-bold text-emerald-800 transition-all duration-500 hover:text-emerald-600">
                        <span id="loadingAtomicServiceCount"
                            class="inline-block w-6 h-6 border-2 border-emerald-500 border-t-transparent rounded-xl"></span>
                    </h3>
                </div>
            </div>
            <div
                class="bg-gradient-to-br from-indigo-50 to-violet-50 rounded-xl shadow-md border border-indigo-100 p-6 text-center transition-all duration-300 hover:shadow-lg hover:translate-y-[-5px]">
                <div class="py-2">
                    <h5 class="text-indigo-600 text-sm font-medium">开发者总数</h5>
                    <h3 id="developerCount"
                        class="text-2xl font-bold text-indigo-800 transition-all duration-500 hover:text-indigo-600">
                        <span id="loadingDeveloperCount"
                            class="inline-block w-6 h-6 border-2 border-indigo-500 border-t-transparent rounded-xl"></span>
                    </h3>
                </div>
            </div>
            <div
                class="bg-gradient-to-r from-purple-50 to-fuchsia-50 rounded-xl shadow-md border border-indigo-100 p-6 text-center transition-all duration-300 hover:shadow-lg hover:translate-y-[-5px]">
                <div class="py-2">
                    <h5 class="text-indigo-600 text-sm font-medium">已知专题数量</h5>
                    <h3 id="substance_count"
                        class="text-2xl font-bold text-purple-800 transition-all duration-500 hover:text-purple-600">
                        <span id="loadingDeveloperCount"
                            class="inline-block w-6 h-6 border-2 border-indigo-500 border-t-transparent rounded-xl"></span>
                    </h3>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-r from-blue-50 to-cyan-50 rounded-xl shadow-md border border-blue-100 mb-2">
            <div class="p-2 border-b border-blue-100">
                <h5 class="text-lg font-semibold text-blue-800 mb-0 text-center">总下载榜</h5>
            </div>
            <div class="overflow-x-auto">
                <div class="p-2 chart-container" style="min-width: 2200px;">
                    <canvas id="top_download_chart"></canvas>
                </div>
            </div>
        </div>
        <!-- Charts -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-2">
            <div>
                <div
                    class="bg-gradient-to-r from-purple-50 to-fuchsia-50 rounded-xl shadow-md border border-purple-100">
                    <div class="p-2 border-b border-purple-100">
                        <h5 class="text-lg font-semibold text-purple-800 text-center">总应用评分分布</h5>
                    </div>
                    <div class="p-2 chart-container">
                        <canvas id="rating_chart"></canvas>
                    </div>
                </div>
            </div>
            <div>
                <div
                    class="bg-gradient-to-r from-purple-50 to-fuchsia-50 rounded-xl shadow-md border border-purple-100">
                    <div class="p-2 border-b border-purple-100">
                        <h5 class="text-lg font-semibold text-purple-800 text-center">应用目标sdk分布</h5>
                    </div>
                    <div class="p-2 chart-container">
                        <canvas id="target_sdk_chart"></canvas>
                    </div>
                </div>
            </div>
            <div>
                <div
                    class="bg-gradient-to-r from-purple-50 to-fuchsia-50 rounded-xl shadow-md border border-purple-100">
                    <div class="p-2 border-b border-purple-100">
                        <h5 class="text-lg font-semibold text-purple-800 text-center">应用最小sdk分布</h5>
                    </div>
                    <div class="p-2 chart-container">
                        <canvas id="min_sdk_chart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-gradient-to-r from-teal-50 to-emerald-50 rounded-xl shadow-md border border-teal-100 mb-2">
            <div class="p-2 border-b border-teal-100">
                <h5 class="text-lg font-semibold text-teal-800 text-center">非华为应用/内置应用下载榜</h5>
            </div>
            <div class="overflow-x-auto">
                <div class="p-2 chart-container" style="min-width: 2200px;">
                    <canvas id="top_download_chart_not_huawei"></canvas>
                </div>
            </div>
        </div>

        <!-- Apps Table -->
        <div
            class="bg-gradient-to-r from-amber-50 to-yellow-50 rounded-xl shadow-md border border-amber-100 mb-4">
            <div class="p-4">
                <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-4">
                    <h5 class="text-lg font-semibold text-amber-800 mb-0 flex-shrink-0">应用列表 (施工中, 功能可能出现 bug)</h5>

                    <!-- 主要控件容器，内部采用纵向排列，分为上下两行 -->
                    <div class="flex flex-col w-full md:w-auto gap-1">

                        <!-- 第一行: 核心搜索功能 -->
                        <div class="flex items-center gap-2 w-full">
                            <input type="text" id="searchInput"
                                class="flex-1 min-w-0 px-3 py-2 border border-amber-200 rounded-xl shadow-sm focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-amber-500 text-sm bg-amber-50 placeholder-amber-400"
                                placeholder="搜索应用">
                            <select id="searchKeySelect"
                                class="px-3 py-2 border border-amber-200 rounded-xl shadow-sm focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-amber-500 text-sm bg-amber-50 text-amber-700">
                                <option value="name" selected>应用名称</option>
                                <option value="pkg_name">包名</option>
                                <option value="description">应用描述</option>
                                <option value="app_id">应用 ID</option>
                                <option value="developer_name">开发者名称</option>
                                <option value="dev_en_name">开发者英文名称</option>
                                <option value="supplier">供应商</option>
                                <option value="kind_name">类型名</option>
                                <option value="tag_name">标签名</option>
                                <option value="kind_type_name">应用分类</option>
                                <option value="minsdk">最小api</option>
                                <option value="target_sdk">目标api</option>
                            </select>
                            <button id="searchBtn"
                                class="px-3 py-2 bg-gradient-to-r from-amber-500 to-yellow-500 text-white text-sm font-medium rounded-xl hover:from-amber-600 hover:to-yellow-600 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 transition-all duration-300 transform hover:scale-105 hover:shadow-md flex-shrink-0">搜索</button>
                        </div>

                        <!-- 第二行: 辅助操作和筛选器，允许内部换行 -->
                        <div class="flex items-center flex-wrap gap-x-4 gap-y-2">
                            <button id="clearSearchBtn"
                                class="px-3 py-2 bg-gradient-to-r from-gray-500 to-gray-600 text-white text-sm font-medium rounded-xl hover:from-gray-600 hover:to-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-all duration-300 transform hover:scale-105 hover:shadow-md"
                                title="清除所有搜索条件">清除搜索</button>
                            <button id="searchHelpBtn"
                                class="px-3 py-2 bg-gradient-to-r from-amber-500 to-yellow-500 text-white text-sm font-medium rounded-xl hover:from-amber-600 hover:to-yellow-600 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 transition-all duration-300 transform hover:scale-105 hover:shadow-md"
                                title="搜索帮助">搜索功能帮助</button>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" id="excludeHuawei" class="sr-only peer">
                                <span class="ml-1 text-sm font-medium text-amber-700">忽略华为</span>
                                <div
                                    class="ml-2 relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-amber-300 rounded-xl peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-xl after:h-5 after:w-5 after:transition-all peer-checked:bg-amber-600">
                                </div>
                            </label>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" id="excludeAtomic" class="sr-only peer">
                                <span class="ml-1 text-sm font-medium text-amber-700">忽略元服务</span>
                                <div
                                    class="ml-2 relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-amber-300 rounded-xl peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-xl after:h-5 after:w-5 after:transition-all peer-checked:bg-amber-600">
                                </div>
                            </label>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" id="searchExact" class="sr-only peer">
                                <span class="ml-1 text-sm font-medium text-amber-700">精确匹配</span>
                                <div
                                    class="ml-2 relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-amber-300 rounded-xl peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-xl after:h-5 after:w-5 after:transition-all peer-checked:bg-amber-600">
                                </div>
                            </label>
                        </div>

                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-amber-200">
                        <thead class="bg-gradient-to-r from-amber-100 to-yellow-100">
                            <tr>
                                <th
                                    class="px-3 py-2 text-left text-xs font-medium text-amber-700 uppercase tracking-wider">
                                    序号</th>
                                <th
                                    class="px-3 py-2 text-left text-xs font-medium text-amber-700 uppercase tracking-wider">
                                    应用名称</th>
                                <th
                                    class="px-3 py-2 text-left text-xs font-medium text-amber-700 uppercase tracking-wider">
                                    开发者</th>
                                <th
                                    class="px-3 py-2 text-left text-xs font-medium text-amber-700 uppercase tracking-wider">
                                    分类</th>
                                <th
                                    class="px-3 py-2 text-left text-xs font-medium text-amber-700 uppercase tracking-wider">
                                    评分</th>
                                <th class="px-3 py-2 text-left text-xs font-medium text-amber-700 uppercase tracking-wider cursor-pointer transition-all duration-200 hover:bg-amber-200"
                                    data-sort="total_star_rating_count">
                                    评分数量 <span class="ml-1 text-amber-500 font-bold">↓</span>
                                </th>
                                <th class="px-3 py-2 text-left text-xs font-medium text-amber-700 uppercase tracking-wider cursor-pointer transition-all duration-200 hover:bg-amber-200"
                                    data-sort="download_count">
                                    下载量 <span class="ml-1 text-amber-500 font-bold">↓</span>
                                </th>
                                <th class="px-3 py-2 text-left text-xs font-medium text-amber-700 uppercase tracking-wider cursor-pointer transition-all duration-200 hover:bg-amber-200"
                                    data-sort="size_bytes">
                                    大小 <span class="ml-1 text-amber-500 font-bold">↑</span>
                                </th>
                                <th class="px-3 py-2 text-left text-xs font-medium text-amber-700 uppercase tracking-wider cursor-pointer transition-all duration-200 hover:bg-amber-200"
                                    data-sort="metrics_created_at">
                                    上次数据更新 <span class="ml-1 text-amber-500 font-bold">↑</span>
                                </th>
                                <th class="px-3 py-2 text-left text-xs font-medium text-amber-700 uppercase tracking-wider cursor-pointer transition-all duration-200 hover:bg-amber-200"
                                    data-sort="created_at">
                                    应用爬取时间 <span class="ml-1 text-amber-500 font-bold">↑</span>
                                </th>
                                <th class="px-3 py-2 text-left text-xs font-medium text-amber-700 uppercase tracking-wider cursor-pointer transition-all duration-200 hover:bg-amber-200"
                                    data-sort="listed_at">
                                    应用上架时间(可能不准) <span class="ml-1 text-amber-500 font-bold">↑</span>
                                </th>
                            </tr>
                        </thead>
                        <tbody id="appTableBody"
                            class="bg-gradient-to-r from-amber-50 to-yellow-50 divide-y divide-amber-100">
                            <tr>
                                <td colspan="8" class="text-center py-12">
                                    <div
                                        class="inline-block w-8 h-8 border-2 border-amber-500 border-t-transparent rounded-xl animate-spin">
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <nav aria-label="Page navigation" class="mt-6">
                    <ul id="pagination" class="flex justify-center space-x-2"></ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- Help Modal -->
    <div id="helpModal"
        class="fixed inset-0 bg-black bg-opacity-60 hidden overflow-y-auto h-full w-full z-50 backdrop-blur-sm transition-opacity duration-300">
        <div
            class="relative top-8 mx-auto p-5 border border-indigo-200 w-11/12 md:w-11/12 lg:w-4/5 xl:w-3/4 shadow-lg rounded-xl bg-gradient-to-r from-indigo-50 to-purple-50 max-h-[90vh] overflow-y-auto transition-transform duration-300 transform">
            <div class="mt-3">
                <div class="flex justify-between items-center">
                    <h5
                        class="text-lg font-semibold text-indigo-900 bg-gradient-to-r from-indigo-200 to-purple-200 px-3 py-2 rounded-xl shadow-sm">
                        帮助信息 - 华为应用市场看板使用说明</h5>
                    <button type="button" id="closeHelpModal"
                        class="btn-animation text-blue-400 hover:text-blue-600 transition-all duration-300 transform hover:rotate-180">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
                <div class="my-4 space-y-6">
                    <!-- 数据来源说明 -->
                    <div
                        class="bg-gradient-to-r from-blue-50 to-indigo-50 p-4 rounded-xl shadow-sm border border-blue-100 transition-all duration-300 hover:shadow-md">
                        <h6 class="text-md font-semibold text-blue-800 mb-2">📊 数据来源说明</h6>
                        <p class="text-blue-700 text-sm">
                            本看板数据收集自华为应用市场（AppGallery）公开API，数据仅供参考，不保证来源的准确性、完整性和真实性。
                        </p>
                    </div>

                    <!-- 主要功能 -->
                    <div
                        class="bg-gradient-to-r from-green-50 to-emerald-50 p-4 rounded-xl shadow-sm border border-green-100 transition-all duration-300 hover:shadow-md">
                        <h6 class="text-md font-semibold text-emerald-800 mb-2">🚀 主要功能</h6>
                        <ul class="text-emerald-700 text-sm space-y-2">
                            <li><strong class="text-emerald-600">数据概览</strong> - 显示已爬取总数、应用总数、元服务总数、开发者总数</li>
                            <li><strong class="text-emerald-600">总下载榜</strong> - 展示应用下载量排行榜</li>
                            <li><strong class="text-emerald-600">评分分布</strong> - 显示应用评分的分布情况</li>
                            <li><strong class="text-emerald-600">非华为应用下载榜</strong> - 展示非华为应用和内置应用的下载排行</li>
                            <li><strong class="text-emerald-600">应用列表</strong> - 详细的应用信息表格，支持搜索、排序和快速筛选</li>
                        </ul>
                    </div>

                    <!-- 使用说明 -->
                    <div
                        class="bg-gradient-to-r from-amber-50 to-yellow-50 p-4 rounded-xl shadow-sm border border-amber-100 transition-all duration-300 hover:shadow-md">
                        <h6 class="text-md font-semibold text-amber-800 mb-2">📝 使用说明</h6>
                        <ul class="text-amber-700 text-sm space-y-2">
                            <li><strong class="text-amber-600">刷新数据</strong> - 点击"刷新数据"按钮获取最新数据</li>
                            <li><strong class="text-amber-600">搜索应用</strong> - 在应用列表上方的搜索框中输入关键词，支持应用名称、包名、开发者等多种搜索方式</li>
                            <li><strong class="text-amber-600">快速筛选</strong> - 点击应用列表中的<span class="inline-flex items-center px-2 py-0.5 text-xs rounded-lg bg-blue-100 text-blue-600 border border-blue-200">开发者名称</span>可快速搜索该开发者的所有应用（精确匹配）</li>
                            <li><strong class="text-amber-600">排序功能</strong> - 点击表格标题（开发者、分类、评分、下载量、大小、上次更新）进行排序</li>
                            <li><strong class="text-amber-600">查看详情</strong> - 点击应用行查看详细的应用信息</li>
                            <li><strong class="text-amber-600">过滤选项</strong> - 使用"排除华为"和"排除元服务"复选框快速过滤应用</li>
                            <li><strong class="text-amber-600">分页浏览</strong> - 使用底部分页控件浏览更多应用</li>
                        </ul>
                    </div>

                    <!-- 注意事项 -->
                    <div
                        class="bg-gradient-to-r from-rose-50 to-pink-50 p-4 rounded-xl shadow-sm border border-rose-100 transition-all duration-300 hover:shadow-md">
                        <h6 class="text-md font-semibold text-rose-800 mb-2">⚠️ 注意事项</h6>
                        <ul class="text-rose-700 text-sm space-y-2">
                            <li>部分功能仍在开发中，可能会出现bug或数据不完整的情况</li>
                            <li>数据更新可能存在延迟，请以官方数据为准</li>
                            <li>应用详情页面仍在施工中，部分数据可能显示不正确</li>
                            <li>使用ESC键可以快速关闭弹窗</li>
                        </ul>
                    </div>

                    <!-- 技术支持 -->
                    <div
                        class="bg-gradient-to-r from-purple-50 to-violet-50 p-4 rounded-xl shadow-sm border border-purple-100 transition-all duration-300 hover:shadow-md">
                        <h6 class="text-md font-semibold text-violet-800 mb-2">🔧 技术支持</h6>
                        <p class="text-violet-700 text-sm">
                            如遇到问题或需要技术支持，请联系相关开发人员。
                        </p>
                    </div>
                </div>
            </div>
            <div class="flex justify-end pt-2">
                <button id="closeHelpModalBtn"
                    class="btn-animation px-3 py-2 bg-gradient-to-r from-indigo-500 to-purple-600 text-white text-base font-medium rounded-xl shadow-sm hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-all duration-300 transform hover:scale-105 hover:shadow-md">关闭</button>
            </div>
        </div>
    </div>

    <div id="searchHelpModal"
        class="fixed inset-0 bg-black bg-opacity-60 hidden overflow-y-auto h-full w-full z-50 backdrop-blur-sm transition-opacity duration-300">
        <div
            class="relative top-8 mx-auto p-5 border border-amber-200 w-11/12 md:w-11/12 lg:w-4/5 xl:w-3/4 shadow-lg rounded-xl bg-gradient-to-r from-amber-50 to-yellow-50 max-h-[90vh] overflow-y-auto transition-transform duration-300 transform">
            <div class="mt-3">
                <div class="flex justify-between items-center">
                    <h5
                        class="text-lg font-semibold text-amber-800 bg-gradient-to-r from-amber-200 to-yellow-200 px-3 py-2 rounded-xl shadow-sm">
                        搜索功能帮助</h5>
                    <button type="button" id="closeSearchHelpModal"
                        class="text-amber-400 hover:text-amber-600 transition-all duration-300 transform hover:rotate-180">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
                <div class="my-4 space-y-6">
                    <div
                        class="bg-gradient-to-r from-blue-50 to-indigo-50 p-4 rounded-xl shadow-sm border border-blue-100">
                        <h6 class="text-md font-semibold text-blue-800 mb-2">🔍 搜索类别说明</h6>
                        <ul class="text-blue-700 text-sm space-y-2">
                            <li><strong>应用名称</strong> (name): 搜索应用的显示名称，如 "微信"。</li>
                            <li><strong>包名</strong> (pkg_name): 搜索应用的唯一包标识符，如 "com.tencent.mm"。</li>
                            <li><strong>应用 ID</strong> (app_id): 搜索华为应用市场的应用唯一 ID。</li>
                            <li><strong>开发者 ID</strong> (dev_id): 搜索开发者的唯一标识符。</li>
                            <li><strong>开发者名称</strong> (developer_name): 搜索中文开发者名称。</li>
                            <li><strong>开发者英文名称</strong> (dev_en_name): 搜索英文开发者名称。</li>
                            <li><strong>应用描述</strong> (description): 搜索应用的描述信息。</li>
                            <li><strong>供应商</strong> (supplier): 搜索应用的供应商信息。</li>
                            <li><strong>类型名</strong> (kind_name): 搜索应用的类型名称。</li>
                            <li><strong>应用分类</strong> (kind_type_name): 搜索应用的分类类型名称。</li>
                            <li><strong>标签名</strong> (tag_name): 搜索应用的标签名称。</li>
                        </ul>
                    </div>
                    <div
                        class="bg-gradient-to-r from-green-50 to-emerald-50 p-4 rounded-xl shadow-sm border border-green-100">
                        <h6 class="text-md font-semibold text-emerald-800 mb-2">⚡ 精确匹配开关</h6>
                        <p class="text-emerald-700 text-sm">
                            <strong>开启 (勾选)</strong>: 进行精确匹配，只返回完全匹配关键词的结果。<br>
                            <strong>关闭 (未勾选)</strong>: 进行模糊搜索，支持部分匹配，提高搜索灵活性。<br> 默认关闭（模糊搜索）。
                            <br>
                            <br>
                            <br>
                            <strong>高级说明</strong><br> 搜索使用 PostgreSql 的 ILIKE, 模糊搜索就是在搜索内容两边各加一个 %, <br> 因此你可以使用 % 来做通配符
                            _ 来做单个通配符<br> 或者使用其他 pg ILIKE 语法允许的特殊内容 (不用想着注入了, 我用的 .bind)
                        </p>
                    </div>
                    <div
                        class="bg-gradient-to-r from-purple-50 to-violet-50 p-4 rounded-xl shadow-sm border border-purple-100">
                        <h6 class="text-md font-semibold text-purple-800 mb-2">⚡ 快速筛选功能</h6>
                        <p class="text-purple-700 text-sm">
                            在应用列表中，开发者名称以<span class="inline-flex items-center px-2 py-0.5 text-xs rounded-lg bg-blue-100 text-blue-600 border border-blue-200 mx-1">浅蓝色按钮</span>形式显示。<br>
                            <strong>点击开发者名称</strong>可快速搜索该开发者的所有应用，自动设置为精确匹配模式。<br>
                            这是一种快捷的筛选方式，无需手动输入搜索内容。
                        </p>
                    </div>
                    <div
                        class="bg-gradient-to-r from-amber-50 to-yellow-50 p-4 rounded-xl shadow-sm border border-amber-100">
                        <h6 class="text-md font-semibold text-amber-800 mb-2">📝 使用提示</h6>
                        <ul class="text-amber-700 text-sm space-y-2">
                            <li>点击"搜索"按钮或按 Enter 键执行搜索。</li>
                            <li>点击"清除搜索"按钮可一键清除所有搜索条件，恢复默认显示。</li>
                            <li>搜索仅在输入关键词和选择类别后生效。</li>
                            <li>支持排序和分页，与搜索结果结合使用。</li>
                            <li>使用"排除华为"和"排除元服务"复选框可快速过滤特定类型的应用。</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="flex justify-end pt-2">
                <button id="closeSearchHelpBtn"
                    class="px-3 py-2 bg-gradient-to-r from-amber-500 to-yellow-500 text-white text-base font-medium rounded-xl shadow-sm hover:from-amber-600 hover:to-yellow-600 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 transition-all duration-300 transform hover:scale-105 hover:shadow-md">关闭</button>
            </div>
        </div>
    </div>

    <!-- Contact Modal -->
    <div id="contactModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center hidden z-50">
        <div class="bg-white rounded-xl shadow-xl p-6 w-full max-w-md mx-auto animate-fade-in-up">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-semibold text-gray-900">问题反馈&交流</h3>
                <button type="button" id="closeContactModal"
                    class="text-amber-400 hover:text-amber-600 transition-all duration-300 transform hover:rotate-180">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
                        </path>
                    </svg>
                </button>
            </div>
            <div class="text-gray-700 space-y-2">
                <p><strong>QQ群:</strong> 757273833</p>
                <p><strong>联系方式:</strong></p>
                <p><strong>shenjack (主要负责人):</strong> 3695888@qq.com</p>
                <p><strong>Rayawa (鸿蒙应用开发):</strong> rayawa.work@outlook.com</p>
                <p><strong>tianxiu2b2t (v2站网页负责人):</strong> administrator@ttb-network.top</p>
            </div>
            <div class="flex justify-end pt-2">
                <button id="closeContactModalBtn"
                    class="btn-animation px-3 py-2 bg-gradient-to-r from-indigo-500 to-purple-600 text-white text-base font-medium rounded-xl shadow-sm hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-all duration-300 transform hover:scale-105 hover:shadow-md">关闭</button>
            </div>
        </div>
    </div>

    <!-- App Detail Modal -->
    <div id="appDetailModal"
        class="fixed inset-0 bg-black bg-opacity-60 hidden overflow-y-auto h-full w-full z-50 backdrop-blur-sm transition-opacity duration-300">
        <div
            class="relative top-8 mx-auto p-5 border border-cyan-200 w-11/12 md:w-10/12 lg:w-3/4 shadow-lg rounded-xl bg-gradient-to-r from-cyan-50 to-blue-50 transition-transform duration-300 transform">
            <div class="mt-3">
                <div class="flex justify-between items-center">
                    <h5 id="appDetailTitle"
                        class="text-lg font-semibold text-cyan-900 bg-gradient-to-r from-cyan-200 to-blue-200 px-3 py-2 rounded-xl shadow-sm">
                        应用详情</h5>
                    <button type="button"
                        class="btn-animation text-blue-400 hover:text-blue-600 transition-all duration-300 transform hover:rotate-180"
                        onclick="document.getElementById('appDetailModal').classList.add('hidden')">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
                <div class="my-4" id="appDetailContent"></div>
            </div>
            <div class="flex justify-end pt-2">
                <button onclick="document.getElementById('appDetailModal').classList.add('hidden')"
                    class="btn-animation px-3 py-2 bg-gradient-to-r from-cyan-500 to-blue-600 text-white text-base font-medium rounded-xl shadow-sm hover:from-cyan-600 hover:to-blue-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 transition-all duration-300 transform hover:scale-105 hover:shadow-md">关闭</button>
            </div>
        </div>
    </div>

    <!-- 投稿模态框 -->
    <div id="submitModal" class="fixed inset-0 bg-black/50 flex items-center justify-center hidden z-50">
        <div class="bg-white p-6 rounded-xl shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto">
            <h2 class="text-xl font-bold mb-4 text-center">投稿</h2>

            <!-- 应用详情页链接（可选） -->
            <div class="mb-4">
                <label for="linkInput" class="block text-sm font-medium text-gray-700 mb-1">应用详情页链接（可选）</label>
                <input type="url" id="linkInput"
                    class="w-full px-3 py-2 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
                    placeholder="https://appgallery.huawei.com/app/detail?id=com.example.app">
                <span id="linkError" class="text-red-500 text-sm hidden">链接格式不正确</span>
            </div>

            <!-- 包名 -->
            <div class="mb-4">
                <label for="pkgInput" class="block text-sm font-medium text-gray-700 mb-1">包名</label>
                <input type="text" id="pkgInput"
                    class="w-full px-3 py-2 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
                    placeholder="com.example.app">
                <span id="pkgError" class="text-red-500 text-sm hidden">包名不能为空且只能包含字母、数字、下划线和点</span>
            </div>

            <!-- app_id -->
            <div class="mb-4">
                <label for="appIdInput" class="block text-sm font-medium text-gray-700 mb-1">app_id</label>
                <input type="text" id="appIdInput"
                    class="w-full px-3 py-2 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
                    placeholder="123456">
                <span id="appIdError" class="text-red-500 text-sm hidden">app_id不能为空</span>
            </div>

            <!-- 用户名（可选） -->
            <div class="mb-4">
                <div class="flex justify-between items-center mb-1">
                    <label for="usernameInput" class="block text-sm font-medium text-gray-700">用户名（可选）</label>
                    <button type="button" id="clearUsernameStorage"
                        class="text-xs text-gray-500 hover:text-red-500">清除记忆</button>
                </div>
                <input type="text" id="usernameInput"
                    class="w-full px-3 py-2 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
                    placeholder="您的用户名">
            </div>

            <!-- 备注（可选） -->
            <div class="mb-4">
                <label for="remarkInput" class="block text-sm font-medium text-gray-700 mb-1">备注（可选）</label>
                <input type="text" id="remarkInput"
                    class="w-full px-3 py-2 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
                    placeholder="备注信息">
            </div>

            <!-- 查询按钮 -->
            <button id="queryBtn"
                class="w-full bg-green-500 text-white py-2 px-3 rounded-xl hover:bg-green-600 mb-2">查询</button>

            <!-- 清空按钮 -->
            <button id="clearBtn"
                class="w-full bg-blue-500 text-white py-2 px-3 rounded-xl hover:bg-blue-600 mb-4">清空</button>

            <!-- 查询结果展示区域 -->
            <div id="resultArea" class="hidden mb-4">
                <h3 class="text-lg font-semibold mb-2">查询结果</h3>
                <div id="resultContent" class="bg-gray-50 p-3 rounded-xl"></div>
            </div>

            <!-- 关闭按钮 -->
            <button id="closeSubmitModal"
                class="w-full bg-gray-500 text-white py-2 px-3 rounded-xl hover:bg-gray-600">关闭</button>
        </div>
    </div>

    <!-- 更新日志模态框 -->
    <div id="changelogModal"
        class="fixed inset-0 bg-black bg-opacity-60 hidden overflow-y-auto h-full w-full z-50 backdrop-blur-sm transition-opacity duration-300">
        <div
            class="relative top-4 mx-auto p-5 border border-indigo-200 w-[95vw] h-[95vh] shadow-lg rounded-xl bg-gradient-to-r from-indigo-50 to-purple-50 transition-transform duration-300 transform">
            <div class="flex flex-col h-full">
                <div class="flex justify-between items-center mb-4">
                    <h5
                        class="text-lg font-semibold text-indigo-900 bg-gradient-to-r from-indigo-200 to-purple-200 px-3 py-2 rounded-xl shadow-sm">
                        更新日志</h5>
                    <button type="button" id="closeChangelogModal"
                        class="btn-animation text-blue-400 hover:text-blue-600 transition-all duration-300 transform hover:rotate-180">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
                <div class="flex-1 overflow-y-auto p-8">
                    <!-- 更新日志内容占位符 -->
                </div>
                <div class="flex justify-end pt-4 mt-4 border-t border-indigo-200">
                    <button id="closeChangelogModalBtn"
                        class="btn-animation px-3 py-2 bg-gradient-to-r from-indigo-500 to-purple-600 text-white text-base font-medium rounded-xl shadow-sm hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-all duration-300 transform hover:scale-105 hover:shadow-md">关闭</button>
                </div>
            </div>
        </div>
    </div>

</body>

</html>
